<template>
	<view class="login-black" v-if="showLoginDialog">
		<view class="login-white" >
			<view v-if="loginStep" class="box">
				<view class="f-r-c title">请先授权登录</view>
				<view class="f-r-c checkbox">
					<checkbox :checked="agreeXy"  :color="themeColor"  @click="agreeXy=!agreeXy" />
					<text :style="{'color':themeColor}">我已阅读并同意《注册协议》《隐私保护政策》</text>
				</view>
				<view class="foot">
					<view class="f-r-c btn "  :style="{'color':themeColor,'background':themeColor+'20'}" @click="cancelLogin">取消</view>
					<view class="f-r-c btn"  :style="{'color':'#fff','background':themeColor}" @click="login" >确认</view>
				</view>
			</view>
			
			<view v-if="phoneStep" class="box">
				<view class="f-r-c title">手机号快捷登录</view>
				<view class="f-r-c checkbox">
					<text >
						为了更好的为您服务，在官方网站或者 APP 登录使用时，同步用户信息，需要您授权手机号
					</text>
				</view>
				<view class="foot">
					<view class="f-r-c btn "  :style="{'color':themeColor,'background':themeColor+'20'}" @click="cancelPhone">取消</view>
					<button class="f-r-c btn" :style="{'color':'#fff','background':themeColor}" hover-class="none" type='primary' open-type="getPhoneNumber" @getphonenumber="submitPhone" >确认</button>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		props:['showDialog',],
		data(){
			return{
				showLoginDialog:false,
				//同意协议
				agreeXy:false,
				loginStep:true, //显示登录按钮
				phoneStep:false, //显示授权手机号按钮
				// code:'',
				
			}
		},
		watch:{
			// showDialog(val,oldval){
			// 	console.log("是否显示弹框");
			// 	this.showLoginDialog=val;
			// },
		},
		computed: {
			themeColor() {
				return this.$themeColor;
			},
		},
		methods:{
			open(){
				this.showLoginDialog=true;
			},
			cancelLogin(){
				this.showLoginDialog=false;
				// 刷新父级页面
				uni.$emit('refreshData', {iflogin: false});
			},
			//登录
			login(){
				if(!this.agreeXy){
					uni.showToast({
						title:'需要阅读并同意注册协议和隐私保护政策',
						icon:'none',
					})
					return false;
				}
				
			},
			//取消授权手机号
			cancelPhone(){
				this.loginStep=true;
				this.phoneStep=false;
				this.cancelLogin();
			},
			//授权授权 获取手机号 code 用于登录
			submitPhone(e) {
				this.loginStep=true;
				this.phoneStep=false;
				this.showLoginDialog=false;
				return false;
			  
			    
			},
			
		},
		
	}
</script>

<style scoped lang="less">
	
button{
        border:0;
        -webkit-tap-highlight-color: transparent;
        background-color:transparent;
//         // border-radius:50%;
        box-sizing: border-box;
//         color: #000;
        cursor: pointer;
//         display: block;
       border-radius: 20rpx;
       font-size: 33rpx;
       font-weight: 500;
       text-align: center;
        line-height:0;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
        padding-left: 0;
        padding-right: 0;
        position: relative;
        text-decoration: none;
}
button::after{
     border:0;
}
	.login-black{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.4);
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 200;
		.login-white{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			border-radius: 20rpx 20rpx 0 0;
			.box{
				overflow: hidden;
				.title{
					text-align: center;
					font-size: 40rpx;
					color: #000;
					font-weight: 500;
					margin-bottom: 20rpx;
					margin-top: 60rpx;
				}
				.checkbox{
					margin: 0 60rpx 60rpx ;
					height: 70rpx;
					text{
						font-size: 26rpx;
						color: #bbb;
						text-align: center;
					}
					
					
				}
				.foot{
					margin-bottom: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-around;
					.btn{
						width: 240rpx;
						height: 80rpx;
						border-radius: 20rpx;
						font-size: 33rpx;
						font-weight: 500;
						text-align: center;
						
					}
				}
						
			}
			
		}
	}
</style>